body {
    margin: 0;
    background-color: #000;
    padding: 20/@rem;
}

//& 的用法
a {
    color: #000;
    &:hover {
        color: red;
    }
    &.padding-left {
        padding-left: 20/@rem;
    }
}

//变量
@width: 12;

.border {
    width: @width * 1/@rem;
}

@width: 2/@rem;
@style: solid;
@color: red;

.box1{
    width: 300/@rem;
    height: 100/@rem;
    border: @width @style @color;
}

//混合1
.classa{
    border:1/@rem solid #000;
}

.classb{
    .classa;
}

//带参数混合
/*.border(@color){
    border:1/@rem solid @color;
}

.box1{
    .border(red)
}
.box2{
    .border(blue)
}*/

//带默认值的混合参数
/*.border(@color: green){
    border:1/@rem solid @color;
}

.box1{
    .border()
}
.box2{
    .border()
}*/

//arguments变量,不需要参数顺序的时候

/*
.border(@width:1/@rem, @style: solid){
    border:@arguments red;
}

.box1{
    .border()
}
.box2{
    .border()
}*/

//匹配模式

.border(top, @width:1/@rem){
    border-top: @width solid #033333;
}

.border(right, @width:1/@rem){
    border-right: @width solid #033333;
}
.border(left, @width:1/@rem){
    border-left: @width solid #033333;
}
.border(bottom, @width:1/@rem){
    border-bottom: @width solid #033333;
}

.border(@_, @width: 1/@rem){
    width: 100/@rem;
}

.box1{
    .border(top, 2/@rem);
}

.box2{
    .border(right);
}
.box1{
    .border(bottom, 2/@rem);
}
//关联文件
@import 'blend';

//避免编译
.box{
    font:(12/@rem)~'/'(20/@rem) '宋体';
}
